{% extends "settings/base.html" %}
{% block container-right %}
<h2 class="heading">消息设置</h2>
<p class="alert alert-error">设置接收哪些消息以邮件的方式通知你</p>
<dl class="notif-options">
  <dt>@你的</dt>
  <dd>
  {% for x in notif_type_choice.at %}
  <span class="option{%if x.value in notifSetting.get_notif_types%} selected{%endif%}">
    <input id="notif-{{x.value}}" type="checkbox" class="notif-type" data-value="{{x.value}}" value="{{x.value}}"{%if x.value in notifSetting.get_notif_types%} checked="checked"{%endif%}>
    <label for="notif-{{x.value}}">{{x.key}}</label>
  </span>
  {% endfor %}
  </dd>
  <dt>合并请求</dt>
  <dd>
  {% for x in notif_type_choice.merge %}
  <span class="option{%if x.value in notifSetting.get_notif_types%} selected{%endif%}">
    <input id="notif-{{x.value}}" type="checkbox" class="notif-type" data-value="{{x.value}}" value="{{x.value}}"{%if x.value in notifSetting.get_notif_types%} checked="checked"{%endif%}>
    <label for="notif-{{x.value}}">{{x.key}}</label>
  </span>
  {% endfor %}
  </dd>
  <dt>问题</dt>
  <dd>
  {% for x in notif_type_choice.issue %}
  <span class="option{%if x.value in notifSetting.get_notif_types%} selected{%endif%}">
    <input id="notif-{{x.value}}" type="checkbox" class="notif-type" data-value="{{x.value}}" value="{{x.value}}"{%if x.value in notifSetting.get_notif_types%} checked="checked"{%endif%}>
    <label for="notif-{{x.value}}">{{x.key}}</label>
  </span>
  {% endfor %}
  </dd>
  <dt>发送频率</dt>
  <dd>
  <span class="option frequency">
    <select id="notifFqcy">
      {% for x in notif_fqcy_choice %}
      <option value="{{x.value}}"{%if x.value == notifSetting.notif_fqcy%} selected="selected"{%endif%}>{{x.key}}</option>
      {% endfor %}
    </select>
  </span>
  </dd>
  <dt>接收邮箱</dt>
  <dd>
  <span class="option email">
    <select id="notifEmail">
      <option disabled>选择接收邮箱</option>
      {% for x in useremails %}
        {% if x.is_verify == 1 %}
          <option value="{{x.email}}"{%if x.email == notifSetting.email%} selected="selected"{%endif%}>{{x.email}}</option>
        {% else %}
          <option value="{{x.email}}" disabled>{{x.email}}<em>还未验证</em></option>
        {% endif %}
      {% endfor %}
    </select>
  </span>
  </dd>
</dl>
<p class="alert hide" id="notice"></p>
{% endblock %}
{% block js %}
<script>
  $(function(){
    var checkCtrl = $('.notif-type');
    checkCtrl.click(function(){
      var checkCtrlWrap = $(this).closest('.option'),
          types = [];
      checkCtrl.each(function(index){
        if(this.checked) {
          var type = $(this).val();
          types.push(type)
        }
    });
    types.sort();
    var types_str = types.join(',');
    var changeClass = function(){
          $('#notice').text('保存成功').fadeIn().delay(1000).fadeOut();
          if(!checkCtrlWrap.hasClass('selected')){
            checkCtrlWrap.addClass('selected');
          } else {
            checkCtrlWrap.removeClass('selected');
          }
       };
    $.post('/settings/notif/types/', {csrfmiddlewaretoken: '{{ csrf_token }}', 'types': types_str}, function(json){})
      .done(function(){ changeClass(); });
    });

    $('#notifFqcy').change(function(){
      var fqcy = $('option:selected', this).val();
      $.post('/settings/notif/fqcy/', {csrfmiddlewaretoken: '{{ csrf_token }}', 'fqcy': fqcy}, function(json){})
      .done(function(){ changeClass(); });
    });
    $('#notifEmail').change(function(){
      var email = $('option:selected', this).val();
      $.post('/settings/notif/email/', {csrfmiddlewaretoken: '{{ csrf_token }}', 'email': email}, function(json){})
      .done(function(){ changeClass(); });
    });
  });
</script>
{% endblock %}
